<template>
	<div class="cre-main"> <!-- 比赛裁判//记录 -->
		<el-page-header @back="goBack" :content="'比赛裁判 '+thisCptt.name">
		</el-page-header>
		<!-- <el-steps :active="2" finish-status="success" simple>
			<el-step title="步骤 1" ></el-step>
			<el-step title="步骤 2" ></el-step>
			<el-step title="步骤 3" ></el-step>
			<el-step title="步骤 4" ></el-step>
			<el-step title="步骤 5" ></el-step>
			<el-step title="步骤 6" ></el-step>
		</el-steps> -->
		<!-- :body-style="{'padding':'0'}" -->
		<el-button @click="go = !go">{{go? '点击暂停':'点击开始'}}</el-button>
		<div v-if="inTheGame">
			<div class="el-card"
			:class="'box-card'+(item.over?'-over':'')"
			v-for="(item,index) in users[round-1]"
			:key="index"
			shadow="hover"
			>
				<div class="el-card__body" 
				@click="changeOver(round-1,index)">
					<!-- <van-field v-model="item.car"
					:disabled="item.over? true:false"
					:label="item.uname" placeholder="赛车"
					@focus="showTS"
					@blur="hiddenTS"
					@input="carHint"
					/> -->
					<div :title="item.uname">
						{{item.uname}}
					</div>
					<el-select 
					v-if="!item.over"
					@change="selectCar"
					v-model="item.car" filterable placeholder="使用车辆">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value"
						 
						  >
					    </el-option>
					</el-select>
				</div>
			</div>
<!-- 			<transition name="tishi">
				<div class="TiShi"
				v-show="ts.isShow"
				:style="{top:ts.Top+'px',left:ts.Left+'px'}"
				>
					提示
				</div>
			</transition> -->
		</div>
		<div v-else style="display: flex;">
			<el-tabs tab-position="left">
				<el-tab-pane
				v-for="(item,index) in round"
				:label="`第${item}组`"
				>
				晋级
					<el-card v-for="i in users[index]" v-if="!i.over">
						{{i.uname}}
					</el-card>
				淘汰
					<el-card v-for="i in users[index]" v-if="i.over">
						{{i.uname}}
					</el-card>
				</el-tab-pane>
			  </el-tabs>
		</div>
		<br><br>
		<div v-for="e in users"><!-- {{i}} -->
			<span id="" v-for="i in e">
				{{i.uid}}:{{i.uname}}、
			</span>
		</div>
		<br>
		{{users}}
		<br><br><br>
		{{thisCptt}}
	</div>
</template>

<script>
import Vue from 'vue'
export default {
	data(){
		return{
			users:[],
			thisCptt:{},
			round:1,//old:1-测试使用
			tt:0,
			inTheGame:true,
			go:false,
			// ts:{//赛车输入提示
			// 	isShow:false,
			// 	Top:20,
			// 	Left:20
			// },
			// Interval:null,
			options: [{
				value: 1001,
				label: '黄金糕'
			}, {
				value: 1002,
				label: '双皮奶'
			}, {
				value: 1003,
				label: '蚵仔煎'
			}, {
				value: 1004,
				label: '龙须面'
			}, {
				value: 1005,
				label: '北京烤鸭'
			}],
		}
	},
	created(){
		this.$emit("changeMain",false)
		this.users = JSON.parse(
		window.sessionStorage.getItem('recordUsers'))
		const index = this.$route.query.id;
		if(this.$store.state.cptts.length > 0)
			this.thisCptt = this.$store.state.cptts[index]
		else {
			setTimeout(()=>{
				this.thisCptt = this.$store.state.cptts[index]
			},1000)
		}
		this.tt = this.users[this.round-1].length - 3
		console.log("是偶数嘛?",parseInt(this.users.length/2) === (this.users.length/2))
	},
	methods:{
		// showTS(){
		// 	this.Interval = setInterval(()=>{
		// 		let {top,right} = document.activeElement.getBoundingClientRect()
		// 		let {Top,Left} = this.ts
		// 		if(top!= Top || right!=Left)
		// 		this.ts = {
		// 			isShow:true,
		// 			Top:top,
		// 			Left:right
		// 		}
		// 	},16)
		// },
		// hiddenTS(){
		// 	window.clearInterval(this.Interval);
		// 	this.ts = {isShow:false};
		// },
		selectCar(e){
			
			const allNum = this.users[this.round-1].length
			const selectNum = this.users[this.round-1]
							.map(e=>e.car!=undefined? 1:0)
							.reduce((a,b)=>a+b)
			if(allNum === selectNum)
				this.go = true
		},
		carHint(){
			
		},
		goBack() {
			this.$router.push('/admin/setC')
		},
		show(e){
			console.log(e)
		},
		changeOver(groupId,index){
			// console.log('淘汰')
			let newData = this.users[groupId][index]
			// console.log(newData)
			if(newData.over != undefined || this.go===false)
				return;
			this.tt -= 1
			
			// console.log(newData)
			if(!newData.over)
				newData.over = this.round
			Vue.set(this.users[groupId],index,newData)

			// if(this.users[groupId].length - this.tt === 3)
			// 	this.$nextTick(()=>{
			// 	this.$message("剩余选手晋级")
			// 	})

			if(this.tt <= 0)//console.log(this.round,this.users.length)
			{
				if(this.round < this.users.length)
					setTimeout(()=>{
						this.go = false
						this.tt = this.users[this.round].length - 3
						this.round += 1
					},200)
				else{
					alert("比赛结束")
					this.inTheGame = false
				}
				return;
			}
		}
	},
	computed:{
	},
	watch:{
		go(){
			// console.log("触发")
			if(this.go === true)
			this.$alert('点击玩家昵称进行淘汰', '提示', {
				confirmButtonText: '了解了',
			})
			else
			this.$alert('离开淘汰模式', '提示', {
				confirmButtonText: '了解了',
			})
		}
	}
}
</script>
<style>
	#app{
		background: #fff;
	}
</style>
<style lang="scss" scoped="scoped">
	
	.cre-main{
		.el-page-header{
			padding: 18px;
		}
		.el-steps{
			background-color: #fff;
		}
		.box-card{
			width: 400px;
			margin: 20px;
			span{
				margin: 20px;
			}
			&:hover{
				margin: 30px;
			}
			&-over{
				width: 300px;
				margin: 20px;
				background: #e8e8e8;
				border: none;
				color: #c1c1c1;
			}
			&-success{
				width: 300px;
				margin: 20px;
				background: #e8e8e8;
				border: none;
				color: #c1c1c1;
			}
			.van-field__label{
				width: auto;
			}
			.el-card__body{
				display: flex;
				div:nth-child(1){
					width: 40%;
					line-height: 40px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		// .TiShi{
		// 	border: 2px solid #EBEEF5;
		// 	background: #eee;
		// 	height: 300px;
		// 	width: 220px;
		// 	position: absolute;
		// }
		
		// .box-card
	}
	.van-field{
		border: none !important;
	}
// .tishi-enter-active {
// 	animation: showTS .4s;
// }
// .tishi-leave-active {
// 	animation: showTS .2s reverse;
// }
// @keyframes showTS{
// 	0%{
// 		height: 0px;
// 	}
// 	100%{
// 		height: 300px;
// 	}
// }
</style>
